import React, { Component } from "react";
import "./Website.css";
import axios from "../../utils/http";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default class Website extends Component {
    //1. 声明状态
    state = {
        title: "",
        url: "",
        keywords: "",
        websites: [], //保存所有的网站数据
    };

    render() {
        //解构赋值
        let { title, url, keywords } = this.state;

        return (
            <div className="website-container">
                <ToastContainer />
                <h2>网站管理</h2>
                <hr />
                <div className="form">
                    {/* 2. 表单元素身上 添加 value 与 onChange */}
                    网站名称:{" "}
                    <input
                        type="text"
                        value={title}
                        onChange={this.saveData("title")}
                    />
                    &nbsp;&nbsp;网址:{" "}
                    <input
                        type="text"
                        value={url}
                        onChange={this.saveData("url")}
                    />
                    &nbsp;&nbsp;关键字:{" "}
                    <input
                        type="text"
                        value={keywords}
                        onChange={this.saveData("keywords")}
                    />
                    &nbsp;&nbsp;<button onClick={this.add}>新增</button>
                </div>
                <hr />
                <div className="search">
                    <input type="text" ref={(el) => (this.keyword = el)} />
                    &nbsp;<button onClick={this.search}>搜索</button>
                </div>
                <hr />
                <table border="1" width="100%">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>名称</td>
                            <td>地址</td>
                            <td>关键字</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.websites.map((item) => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <td>{item.url}</td>
                                    <td>{item.keywords}</td>
                                    <td>
                                        <button onClick={this.remove(item.id)}>
                                            删除
                                        </button>
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }

    //声明一个方法
    remove = (id) => {
        return async () => {
            if (!window.confirm("您确定要删除该网站么")) return;
            //发送 AJAX 请求
            let result = await axios.delete("/website/" + id);
            toast.success("删除成功!!!", {
                position: toast.POSITION.TOP_RIGHT,
            });
            //更新列表
            this.setState({
                websites: this.state.websites.filter((item) => item.id !== id),
            });
        };
    };

    //搜索功能
    search = async () => {
        //获取用户输入的关键字
        let v = this.keyword.value;
        //发送请求 获取指定关键字的网站
        // let result = await axios.get('http://localhost:3001/website?q=' + v);
        let result = await axios.get("/website", { params: { q: v } });
        //更新网站列表
        this.setState({
            websites: result,
        });
    };

    //3. 声明方法, 更新状态  表单值的状态修改
    saveData = (type) => {
        return (e) => {
            this.setState({
                [type]: e.target.value,
            });
        };
    };

    //新增事件回调
    add = async () => {
        //发送 AJAX 请求  POST  http://127.0.0.1:3001/website   请求体  {title, url, keywords}
        //解构赋值
        let { title, keywords, url, websites } = this.state;
        let result = await axios.post("/website", {
            title,
            keywords,
            url,
        });
        //清空表单中的值
        this.setState({
            title: "",
            url: "",
            keywords: "",
        });
        //提示
        toast.success("恭喜! 新增成功", {
            position: toast.POSITION.TOP_RIGHT,
        });
        //更新网站列表
        this.setState({
            websites: [...websites, result],
        });
    };

    //组件挂载完毕
    async componentDidMount() {
        //发送请求 获取所有的网站
        let result = await axios("/website");

        //修改状态  保存数据
        this.setState({
            websites: result,
        });
    }
}
